<template>
  <div class="p-5">
    <div class="flex justify-between">
      <div>
        <el-radio-group v-model="messageEditorStore.serviceRole">
          <el-radio-button v-for="item in serviceRoleList" :key="item.value" :label="item.value">
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <div>
        <el-button-group class="mr-4">
          <el-button>重置tag名单</el-button>
          <el-button>AICHAT开关</el-button>
        </el-button-group>
        <el-tooltip placement="top" content="截取的图片ctrl+v粘贴到输入框即可">
          <el-link :underline="false" type="primary">如何发送截图？</el-link>
        </el-tooltip>
      </div>
    </div>
    <div class="mt-3">
      <el-input
        type="textarea"
        rows="4"
        resize="none"
        class="textarea-wrapper"
        :model-value="messageEditorStore.content"
        @input="handleInput"
      />
    </div>
    <div class="mt-3 flex justify-between">
      <el-button-group>
        <FacePopover />
        <el-button
          :icon="Picture"
          class="text-lg px-3"
          @click="handleSelectMedia(MediaType.IMAGE)"
        />
        <el-button :icon="Folder" class="text-lg px-3" @click="handleSelectMedia(MediaType.FILE)" />
        <el-button
          :icon="VideoCamera"
          class="text-lg px-3"
          @click="handleSelectMedia(MediaType.VIDEO)"
        />
        <el-button :icon="Microphone" class="text-lg px-3" />
      </el-button-group>
      <el-button type="primary" @click="handleSubmit" :disabled="!messageEditorStore.content">
        发送
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Picture, Folder, VideoCamera, Microphone } from '@element-plus/icons-vue'
import FacePopover from '@/manager/components/FacePopover.vue'
import { useMessageEditorStore } from '@/manager/store'
import xss from 'xss'
import { serviceRoleList } from '@/manager/constants'
import selectFiles from 'select-files'
import { mediaMimeType, MediaType } from '@/common/constants'

const messageEditorStore = useMessageEditorStore()

const emit = defineEmits<{
  send: [content: string]
}>()

const handleInput = (text: string) => {
  messageEditorStore.replaceContent(text)
}

const handleSubmit = () => {
  const content = xss(messageEditorStore.content, { allowList: {} })
  emit('send', content)
  messageEditorStore.clearContent()
}

const handleSelectMedia = async (mediaType: MediaType) => {
  const file = await selectFiles({
    accept: mediaMimeType[mediaType],
    multiple: false
  })
  console.debug(file)
}
</script>

<style scoped></style>
